<script setup>
import {onMounted} from "vue";

import Edit from "./edit.vue";
import treeUtil from '@/utils/tree.js'
import api from "./api.js";
import {ElMessage} from "element-plus";

// 局部引入
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const editDialog = ref();

const treeData = ref([]);

const { proxy } = getCurrentInstance();

const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/uploadImg';

const props = defineProps(['value'])
const emit = defineEmits(['updateValue'])
const content = ref('')
const myQuillEditor = ref()
// 通过watch监听回显，笔者这边使用v-model:content 不能正常回显
watch(() => props.value, (val) => {
  toRaw(myQuillEditor.value).setHTML(val)
}, { deep: true })
const fileBtn = ref()
const data = reactive({
  content: '',
  editorOption: {
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        [{ 'size': ['small', false, 'large', 'huge'] }],
        [{ 'font': [] }],
        [{ 'align': [] }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'header': 1 }, { 'header': 2 }],
        ['image'],
        [{ 'direction': 'rtl' }],
        [{ 'color': [] }, { 'background': [] }]
      ]
    },
    placeholder: '请输入内容...'
  }
})
const imgHandler = (state) => {
  if (state) {
    fileBtn.value.click()
  }
}
// 抛出更改内容，此处避免出错直接使用文档提供的getHTML方法
const setValue = () => {
  const text = toRaw(myQuillEditor.value).getHTML()
}
const handleUpload = (e) => {
  const files = Array.prototype.slice.call(e.target.files)
  // console.log(files, "files")
  if (!files) {
    return
  }
  const formdata = new FormData()
  formdata.append('file', files[0])
  // backsite.uploadFile(formdata)  // 此处使用服务端提供上传接口
  //     .then(res => {
  //       if (res.data.url) {
  //         const quill = toRaw(myQuillEditor.value).getQuill()
  //         const length = quill.getSelection().index
  //         quill.insertEmbed(length, 'image', res.data.url)
  //         quill.setSelection(length + 1)
  //       }
  //     })
}
// 初始化编辑器
onMounted(() => {
  const quill = toRaw(myQuillEditor.value).getQuill()
  if (myQuillEditor.value) {
    quill.getModule('toolbar').addHandler('image', imgHandler)
  }
})


</script>

<template>
  <div class="page-container">
    <div class="left">
      <el-button @click="add">增加</el-button>
      <el-tree
          ref="tree" @current-change="handleCurrentChange"
          default-expand-all
          highlight-current
          :data="treeData">
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <div>{{data.title}} </div><div><el-button @click="add(data)">增加子节点</el-button></div>
          </div>

        </template>
      </el-tree>
      <Edit ref="editDialog"></Edit>
    </div>
    <div class="right">
      <div style="height: 100%;width: 100%;">
        <!-- 此处注意写法v-model:content -->
        <QuillEditor ref="myQuillEditor"
                     theme="snow"
                     v-model:content="content"
                     :options="data.editorOption"
                     contentType="html"
                     @update:content="setValue()"
        />
        <!-- 使用自定义图片上传 -->
        <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />


      </div>
    </div>
  </div>
</template>

<style scoped>

.content-show {
  height: 100%;
}

.page-container {
  height: 100%;
  display: flex;
  .left {
    width: 250px;
    border-right: 1px solid #ccc;

    .custom-tree-node {
      width: 100%;
      height: 32px;
      box-sizing: border-box;
      padding-right: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .right {
    flex-grow: 1;

  }
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>
